<!--
 * @Description:
 * @Author: ZachGmy
 * @Date: 2020-09-03 09:57:40
 * @LastEditors: ZachGmy
 * @LastEditTime: 2022-06-15 09:47:49
-->
<template>
  <div class="list">
    <!-- 上传按钮 -->
    <div class="addButton">
      <el-button type="primary" @click="addEpidemic">上报</el-button>
    </div>
    <!-- 表单区域listArea -->
    <div class="listArea">
      <el-table :data="epidemicData" style="width: 100%" max-width="50%">
        <el-table-column label="序号" width="80" type="index">
        </el-table-column>
        <el-table-column prop="country" label="国" width="110" align="center">
        </el-table-column>
        <el-table-column prop="province" label="省" width="110" align="center">
        </el-table-column>
        <el-table-column prop="city" label="市" width="110" align="center">
        </el-table-column>
        <el-table-column prop="area" label="区" width="110" align="center">
        </el-table-column>
        <el-table-column
          prop="confirmed"
          label="新增确诊"
          width="110"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="" label="疑似" align="center">
          <template slot-scope="scope">
            <el-tag type="warning">{{ scope.row.suspected }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="" label="死亡" align="center">
          <template slot-scope="scope">
            <el-tag type="info">{{ scope.row.dead }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="" label="治愈" align="center">
          <template slot-scope="scope">
            <el-tag type="success">{{ scope.row.cure }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="" label="重症" align="center">
          <template slot-scope="scope">
            <el-tag type="danger">{{ scope.row.severe }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="outside"
          label="境外输入"
          width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column label="上报时间" width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.inputTime | fmtDate }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { get } from "@/utils/request";
export default {
  data() {
    return {
      // 疫情数据数组
      epidemicData: [],
      page: 1,
      pageSize: 10,
    };
  },
  // 声明生命周期
  created() {
    this.getEpidemicData();
  },
  methods: {
    // 获取疫情数据方法
    async getEpidemicData() {
      // 设置参数
      let params = {
        page: this.page,
        pageSize: this.pageSize,
      };
      let res = await get("/epidemic/pageQuery", params);
      // console.log(res.data.list)
      this.epidemicData = res.data.list;
    },
    // 上报数据，跳转路由
    addEpidemic() {
      this.$router.push({
        path: "/data/input",
      });
    },
  },
};
</script>

<style scoped>
</style>
